<template>
    <div>
        <MBX
            level="用户管理"
            level2="用户列表"
        ></MBX>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="page.query">
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            @click="xr"
                        ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="18">
                    <el-button
                        type="primary"
                        @click="dialogVisible=true"
                    >点击添加</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <el-table :data="formuser">
                <el-table-column
                    label="#"
                    type="index"
                ></el-table-column>
                <el-table-column
                    label="姓名"
                    prop="username"
                ></el-table-column>
                <el-table-column
                    label="邮箱"
                    prop="email"
                ></el-table-column>
                <el-table-column
                    label="电话"
                    prop="mobile"
                ></el-table-column>
                <el-table-column
                    label="角色"
                    prop="role_name"
                ></el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <div>
                            <el-switch
                                v-model="scope.row.mg_state"
                                @change="zt(scope.row)"
                            ></el-switch>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div>
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                @click="edithuitian(scope.row)"
                            ></el-button>
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                @click="delformuser(scope.row)"
                            ></el-button>
                            <el-button
                                type="warning"
                                icon="el-icon-setting"
                                @click="shezhihuitian(scope.row)"
                            ></el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格 -->
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pagenum"
                :page-sizes="[2, 5, 10, 15]"
                :page-size="page.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <!-- 分页 -->
        </el-card>
        <!-- 添加模态框 -->
        <el-dialog
            title="添加模态框"
            :visible.sync="dialogVisible"
            width="30%"
        >
            <el-form
                :model="addformuser"
                ref="formuserref"
                :rules="formuserrules"
            >
                <el-form-item
                    label="用户名"
                    prop="username"
                >
                    <el-input v-model="addformuser.username"></el-input>
                </el-form-item>
                <el-form-item
                    label="密码"
                    prop="password"
                >
                    <el-input v-model="addformuser.password"></el-input>
                </el-form-item>
                <el-form-item
                    label="邮箱"
                    prop="email"
                >
                    <el-input v-model="addformuser.email"></el-input>
                </el-form-item>
                <el-form-item
                    label="电话"
                    prop="mobile"
                >
                    <el-input v-model="addformuser.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="formuseradd"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 添加模态框 -->
        <!-- 编辑模态框 -->
        <el-dialog
            title="编辑模态框"
            :visible.sync="dialogVisible1"
            width="30%"
        >
            <el-form :model="editformuser">
                <el-form-item
                    label="用户名"
                    prop="username"
                >
                    <el-input
                        :disabled="true"
                        v-model="editformuser.username"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="邮箱"
                    prop="email"
                >
                    <el-input v-model="editformuser.email"></el-input>
                </el-form-item>
                <el-form-item
                    label="电话"
                    prop="mobile"
                >
                    <el-input v-model="editformuser.mobile"></el-input>
                </el-form-item>
            </el-form>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="editformuserok"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑模态框 -->
        <!-- 设置模态框 -->
        <el-dialog
            title="编辑模态框"
            :visible.sync="dialogVisible2"
            width="30%"
        >
            <div>
                <p>当前用户:{{huitianxinxi.username}}</p>
                <p>当前角色:{{huitianxinxi.role_name}}</p>
                分配新角色：
                <el-select
                    v-model="rolesliebiao.id"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in rolesliebiao"
                        :key="item.id"
                        :label="item.roleName"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button @click="dialogVisible2 = false">取 消</el-button>
                <el-button
                    type="primary"
                    @click="shezhitijiao"
                >确 定</el-button>
            </span>
        </el-dialog>
        <!-- 设置模态框 -->
    </div>
</template>

<script>
export default {
  data() {
    const emailreg = (rule, value, callback) => {
      let zz = /^[A-Za-zd0-9]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
      if (!zz.test(value)) {
        return callback(new Error("邮箱格式不正确"));
      }
    };
    const mobilereg = (rule, value, callback) => {
      let zz = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!zz.test(value)) {
        return callback(new Error("手机号码格式不正确"));
      }
    };
    return {
      page: {
        query: "",
        pagenum: 1,
        pagesize: 2
      },
      formuser: [],
      total: 0,
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      addformuser: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      editformuser: {
        username: "",
        email: "",
        mobile: "",
        id: 0
      },
      formuserrules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "请输入3-16个数字或字母字符",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "请输入3-16个数字或字母字符",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { validator: emailreg, trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            validator: mobilereg,
            trigger: "blur"
          }
        ]
      },
      rolesliebiao: [],
      value: "",
      userrow: [],
      huitianxinxi: {
        username: "",
        role_name: ""
      }
    };
  },
  created() {
    this.xr(this.page.query);
  },
  methods: {
    //   渲染
    async xr() {
      let res = await this.$API.yonghuliebiao(this.page);
      console.log("用户列表", res);
      this.formuser = res.users;
      this.total = res.total;
    },
    handleSizeChange(v) {
      this.page.pagesize = v;
      this.xr();
    },
    handleCurrentChange(v) {
      this.page.pagenum = v;
      this.xr();
    },
    // 修改状态
    async zt(row) {
      console.log("状态", row);
      let res = await this.$API.xiugaizhuangtai(row.id, row.mg_state);
      console.log("修改状态", res);
    },
    // 添加用户
    async formuseradd() {
      console.log("dom节点", this.$refs.formuserref);
      //   this.$refs.formuserref.validate(async valid => {
      // if (valid) {
      let res = await this.$API.tianjiayonghu(this.addformuser);
      console.log("添加用户", res);
      this.dialogVisible = false;
      this.xr();
      // }else{
      // alert("失败")
      // }
      //   });
    },
    // 编辑回填
    edithuitian(row) {
      console.log("编辑回填", row);
      this.dialogVisible1 = true;
      this.editformuser.username = row.username;
      this.editformuser.email = row.email;
      this.editformuser.mobile = row.mobile;
      this.editformuser.id = row.id;
    },
    // 提交编辑
    async editformuserok() {
      let res = await this.$API.bianjiyonghu(this.editformuser);
      console.log("提交编辑", res);
      this.xr();
      this.dialogVisible1 = false;
    },
    // 删除用户
    async delformuser(row) {
      let res = await this.$API.shanchuyonghu(row.id);
      console.log("删除用户", res);
      this.xr();
    },
    huoquxuanzeid(id) {
      console.log("选择的角色id", id);
      console.log(1111);
    },
    // 设置回填
    async shezhihuitian(row) {
      console.log("用户信息", row);
      this.dialogVisible2 = true;
      //   渲染角色列表
      let res = await this.$API.jueseliebiao();
      console.log("角色信息", res);
      this.rolesliebiao = res;
      this.userrow = row;
      this.huitianxinxi.username = row.username;
      this.huitianxinxi.role_name = row.role_name;
    },
    // 设置提交
    async shezhitijiao() {
      let res = await this.$API.fenpeijuese(
        this.userrow.id,
        this.rolesliebiao.id
      );
      console.log("提交角色编辑", res);
      console.log("用户id", this.userrow.id);
      console.log("角色id", this.rolesliebiao.id);
      this.dialogVisible2 = false;
      this.xr();
    }
  }
};
</script>

<style scoped >
</style>
